<template>
  <div id="card">
    <div class="title">
      <h1>卡券管理</h1>
      <div>
        <el-button type="primary" @click="toOrder" style="margin-right: 70px"
          >兑换码审核列表</el-button
        >
        <el-button type="primary" @click="toPurchase" style="margin-right: 70px"
          >用户购买记录</el-button
        >
      </div>
    </div>
    <!--表格  -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      >
      <el-table-column type="selection" align="center"> </el-table-column>
      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
      <el-table-column prop="areaName" label="区域" align="center">
      </el-table-column>
      <el-table-column prop="couponName" label="卡券名称" align="center">
      </el-table-column>
      <el-table-column prop="expireTime" label="过期时间" align="center">
      </el-table-column>
      <el-table-column prop="price" label="现价" align="center">
      </el-table-column>
      <!-- 0是停止 1是售卖中 -->
      <el-table-column prop="state" label="状态" align="center">
        <template slot-scope="scope">{{
          scope.row.state == 0
            ? "停止售卖"
            : scope.row.state == 1
            ? "售卖中"
            : "暂未设定"
        }}</template>
      </el-table-column>
      <el-table-column label="修改价格" prop="newPrice">
        <template slot-scope="scope">
          <el-input
            placeholder="输入价格"
            v-model="scope.row.newPrice"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350px" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" :type="scope.row.state==1?'danger':'success'" @click="toStop(scope.row)"
            >{{scope.row.state==1?'点击停止售卖':'点击恢复售卖'}}</el-button
          >
          <el-button size="mini" type="info" @click="toRemove(scope.row.id)"
            >删除</el-button
          >
          <el-button size="mini" type="primary" @click="savePrice(scope.row)"
            >保存</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-button type="info" size="mini" @click="removeAll">批量删除</el-button>
      <el-button type="success" size="mini" @click="toRecovery"
        >批量恢复售卖</el-button
      >
      <el-button type="danger" size="mini" @click="toAllStop"
        >批量停止售卖</el-button
      >
      <el-button type="primary" size="mini" @click="dialogTableVisible = true"
        >增加新的卡券</el-button
      >
      <el-pagination
        style="float: right"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增模态框 -->
    <el-dialog title="添加卡券" :visible.sync="dialogTableVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="卡券名称" prop="couponName">
          <el-input v-model="ruleForm.couponName"></el-input>
        </el-form-item>
        <el-form-item label="卡券价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="适用区域" prop="type">
          <el-select v-model="ruleForm.areaId" placeholder="请选择">
            <el-option
              v-for="v in area"
              :key="v.id"
              :label="v.name"
              :value="v.id"
            >
            </el-option>
          </el-select>

          <!-- <el-checkbox-group v-model="ruleForm.areaId">
            <el-checkbox label="默区" name="type"></el-checkbox>
            <el-checkbox label="曜区" name="type"></el-checkbox>
            <el-checkbox label="双人区" name="type"></el-checkbox>
          </el-checkbox-group> -->
        </el-form-item>
        <el-form-item label="可用日期" prop="usable">
          <el-checkbox-group v-model="ruleForm.usable">
            <el-checkbox label="周一" name="周一"></el-checkbox>
            <el-checkbox label="周二" name="周二"></el-checkbox>
            <el-checkbox label="周三" name="周三"></el-checkbox>
            <el-checkbox label="周四" name="周四"></el-checkbox>
            <el-checkbox label="周五" name="周五"></el-checkbox>
            <el-checkbox label="周六" name="周六"></el-checkbox>
            <el-checkbox label="周天" name="周天"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="有效期限" prop="validDate">
          <el-input
            v-model="ruleForm.validDate"
            placeholder="在多少天内有效"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡券类型" prop="useHours">
          <el-select v-model="ruleForm.useHours" placeholder="请选择套餐 ">
            <el-option label="1小时体验卡" value="1"> </el-option>

            <el-option label="3小时体验卡" value="3"> </el-option>
            <el-option label="5小时体验卡" value="5"> </el-option>
            <el-option label="畅学一天卡" value="24"> </el-option>
            <el-option label="70小时灵活使用卡" value="70"> </el-option>
            <el-option label="考试冲刺月卡" value="720"> </el-option>
            <el-option label="早自习卡" value="2"> </el-option>
            <el-option label="周末卡" value="24"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toAdd">确认添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        //卡券名称
        couponName: "",
        //卡券价格
        price: "",
        //区域id
        areaId: "",
        //可用日期
        usable: [],
        //有效日期
        validDate: "",
        //可用小时
        useHours:''
      },
      rules: {
        couponName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        price: [
          {
            required: true,
            message: "请输入卡券价格",
            trigger: "blur",
          },
        ],
        validDate: [
          {
            required: true,
            message: "请输入多少天内有效",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请至少选择一种区域",
            trigger: "blur",
          },
        ],

        usable: [
          {
            required: true,
            message: "请至少选择一天",
            trigger: "blur",
          },
        ],
      },
      tableData: [],
      dialogTableVisible: false,
      //新的价格
      newPrice: 0,
      page: 1,
      limit: 5,
      total: 0,
      //时段
      timeS: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24,
      ],
      select: [],
      //区域下拉
      area: [],
    };
  },
  methods: {
    //渲染数据
    getData: function () {
      this.$axios({
        url: "/coupon/list",
        method: "get",
        params: {
          page: this.page,
          limit: this.limit,
        },
      }).then(({ data }) => {
        this.tableData = data.data.list;
        this.total = data.data.totalCount;
      });
    },
    toOrder: function () {
      this.$router.push("/home/SeatOrder");
    },
    handleCurrentChange: function (val) {
      this.page = val;
      this.getData();
    },
    toPurchase: function () {
      this.$router.push("/home/PurchaseRecord");
    },
    //确认添加卡券
    toAdd: function () {
      let arr = this.ruleForm.usable.join("/");
      this.$axios({
        url: "/coupon/add",
        method: "post",
        data: {
          //适用区域
          areaId: this.ruleForm.areaId,
          //卡券名称
          couponName: this.ruleForm.couponName,
          //卡券价格
          price: this.ruleForm.price,
          //可用日期
          usable: arr,
          //有效期限
          validDate: this.ruleForm.validDate,
        },
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("新增成功！");
          this.getData();
          this.dialogTableVisible = false;
          this.ruleForm.couponName = "";
          this.ruleForm.price = "";
          this.ruleForm.areaId = "";
          this.ruleForm.usable = [];
          this.ruleForm.validDate = "";
        } else {
          this.$message.error("新增失败！请检查重新输入");
          this.ruleForm.couponName = "";
          this.ruleForm.price = "";
          this.ruleForm.areaId = "";
          this.ruleForm.usable = [];
          this.ruleForm.validDate = "";
        }
      });
    },
    //保存修改价格
    savePrice: function (row) {
      this.$axios({
        url: "/coupon/updatePrice",
        method: "put",
        data: {
          id: row.id,
          price: row.newPrice,
        },
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("修改价格成功！");

          this.getData();
        } else {
          this.$message.success(data.msg);
        }
      });
    },
    //点击停止售卖
    toStop: function (row) {
      if (row.state == 1) {
        this.$axios({
          url: "/coupon/updateHaltSales",
          method: "put",
          data: [
            {
              id: row.id,
              state: 0,
            },
          ],
        }).then(({ data }) => {
          console.log(data);
          if (data.code == 0) {
            this.$message.success("停止售卖成功！");
            this.getData();
            this.select = [];
          } else {
            this.$message.error(data.msg);
          }
        });
      } else {
        this.$axios({
          url: "/coupon/updateHaltSales",
          method: "put",
          data: [
            {
              id: row.id,
              state: 1,
            },
          ],
        }).then(({ data }) => {
          console.log(data);
          if (data.code == 0) {
            this.$message.success("恢复售卖成功！");
            this.getData();
            this.select = [];
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    //点击批量停止售卖
    handleSelectionChange: function (val) {
      this.select = val;
    },
    toAllStop: function () {
      for (let i in this.select) {
        delete this.select[i].areaName;
        delete this.select[i].couponName;
        delete this.select[i].expireTime;
        delete this.select[i].price;
        this.select[i].state = 0;
      }
      this.$axios({
        url: "/coupon/updateHaltSales",
        method: "put",
        data: this.select,
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("批量停止售卖成功！");
          this.getData();
          this.select = [];
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //点击批量恢复售卖
    toRecovery: function () {
      for (let i in this.select) {
        delete this.select[i].areaName;
        delete this.select[i].couponName;
        delete this.select[i].expireTime;
        delete this.select[i].price;
        this.select[i].state = 1;
      }
      this.$axios({
        url: "/coupon/updateSell",
        method: "put",
        data: this.select,
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("恢复售卖成功！");

          this.getData();
        }
      });
    },
    //获取区域下拉
    toArea: function () {
      this.$axios({
        url: "/area/queryall",
      }).then(({ data }) => {
        this.area = data.data;
      });
    },
    //删除
    toRemove: function (row) {
      this.$axios({
        url: "/coupon/delete",
        method: "delete",
        data: [row],
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("删除成功！");
          this.getData();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //批量删除
    removeAll: function () {
      let arr = [];

      for (let i in this.select) {
        arr.push(this.select[i].id);
      }
      this.$axios({
        url: "/coupon/delete",
        method: "delete",
        data: arr,
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("批量删除成功！");
          this.getData();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
  mounted: function () {
    this.getData();
    this.toArea();
  },
};
</script>

<style lang="less" scoped>
#card {
  padding: 0;
  text-align: left;
  line-height: 0;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .page {
    margin-top: 20px;
  }
}
</style>
